extends /_layout/default.pug


block view
  style(type='text/css').
    .btn {
      margin-bottom: 4px;
    }
  .fade-in
    .row
      .col-12
        .card
          .card-header
            strong Brand Buttons
          .card-body
            h6
              | Size Small
              small
                | Add this class
                code .btn-sm
            p
              button.btn.btn-sm.btn-facebook(type='button')
                svg.c-icon.mr-2
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-facebook-f")
                span Facebook
              button.btn.btn-sm.btn-twitter(type='button')
                svg.c-icon.mr-2
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-twitter")
                span Twitter
              button.btn.btn-sm.btn-linkedin(type='button')
                svg.c-icon.mr-2
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-linkedin")
                span LinkedIn
              button.btn.btn-sm.btn-flickr(type='button')
                svg.c-icon.mr-2
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-flickr")
                span Flickr
              button.btn.btn-sm.btn-tumblr(type='button')
                svg.c-icon.mr-2
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-tumblr")
                span Tumblr
              button.btn.btn-sm.btn-xing(type='button')
                svg.c-icon.mr-2
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-xing")
                span Xing
              button.btn.btn-sm.btn-github(type='button')
                svg.c-icon.mr-2
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-github")
                span Github
              button.btn.btn-sm.btn-stack-overflow(type='button')
                svg.c-icon.mr-2
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-stack-overflow")
                span StackOverflow
              button.btn.btn-sm.btn-youtube(type='button')
                svg.c-icon.mr-2
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-youtube")
                span YouTube
              button.btn.btn-sm.btn-dribbble(type='button')
                svg.c-icon.mr-2
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-dribbble")
                span Dribbble
              button.btn.btn-sm.btn-instagram(type='button')
                svg.c-icon.mr-2
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-instagram")
                span Instagram
              button.btn.btn-sm.btn-pinterest(type='button')
                svg.c-icon.mr-2
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-pinterest")
                span Pinterest
              button.btn.btn-sm.btn-vk(type='button')
                svg.c-icon.mr-2
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-vk")
                span VK
              button.btn.btn-sm.btn-yahoo(type='button')
                svg.c-icon.mr-2
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-yahoo")
                span Yahoo
              button.btn.btn-sm.btn-behance(type='button')
                svg.c-icon.mr-2
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-behance")
                span Behance
              button.btn.btn-sm.btn-reddit(type='button')
                svg.c-icon.mr-2
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-reddit")
                span Reddit
              button.btn.btn-sm.btn-vimeo(type='button')
                svg.c-icon.mr-2
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-vimeo")
                span Vimeo
            h6 Size Normal
            p
              button.btn.btn-facebook(type='button')
                svg.c-icon.mr-2
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-facebook-f")
                span Facebook
              button.btn.btn-twitter(type='button')
                svg.c-icon.mr-2
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-twitter")
                span Twitter
              button.btn.btn-linkedin(type='button')
                svg.c-icon.mr-2
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-linkedin")
                span LinkedIn
              button.btn.btn-flickr(type='button')
                svg.c-icon.mr-2
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-flickr")
                span Flickr
              button.btn.btn-tumblr(type='button')
                svg.c-icon.mr-2
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-tumblr")
                span Tumblr
              button.btn.btn-xing(type='button')
                svg.c-icon.mr-2
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-xing")
                span Xing
              button.btn.btn-github(type='button')
                svg.c-icon.mr-2
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-github")
                span Github
              button.btn.btn-stack-overflow(type='button')
                svg.c-icon.mr-2
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-stack-overflow")
                span StackOverflow
              button.btn.btn-youtube(type='button')
                svg.c-icon.mr-2
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-youtube")
                span YouTube
              button.btn.btn-dribbble(type='button')
                svg.c-icon.mr-2
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-dribbble")
                span Dribbble
              button.btn.btn-instagram(type='button')
                svg.c-icon.mr-2
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-instagram")
                span Instagram
              button.btn.btn-pinterest(type='button')
                svg.c-icon.mr-2
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-pinterest")
                span Pinterest
              button.btn.btn-vk(type='button')
                svg.c-icon.mr-2
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-vk")
                span VK
              button.btn.btn-yahoo(type='button')
                svg.c-icon.mr-2
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-yahoo")
                span Yahoo
              button.btn.btn-behance(type='button')
                svg.c-icon.mr-2
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-behance")
                span Behance
              button.btn.btn-reddit(type='button')
                svg.c-icon.mr-2
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-reddit")
                span Reddit
              button.btn.btn-vimeo(type='button')
                svg.c-icon.mr-2
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-vimeo")
                span Vimeo
            h6
              | Size Large
              small
                | Add this class
                code .btn-lg
            p
              button.btn.btn-lg.btn-facebook(type='button')
                svg.c-icon.mr-2
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-facebook-f")
                span Facebook
              button.btn.btn-lg.btn-twitter(type='button')
                svg.c-icon.mr-2
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-twitter")
                span Twitter
              button.btn.btn-lg.btn-linkedin(type='button')
                svg.c-icon.mr-2
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-linkedin")
                span LinkedIn
              button.btn.btn-lg.btn-flickr(type='button')
                svg.c-icon.mr-2
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-flickr")
                span Flickr
              button.btn.btn-lg.btn-tumblr(type='button')
                svg.c-icon.mr-2
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-tumblr")
                span Tumblr
              button.btn.btn-lg.btn-xing(type='button')
                svg.c-icon.mr-2
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-xing")
                span Xing
              button.btn.btn-lg.btn-github(type='button')
                svg.c-icon.mr-2
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-github")
                span Github
              button.btn.btn-lg.btn-stack-overflow(type='button')
                svg.c-icon.mr-2
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-stack-overflow")
                span StackOverflow
              button.btn.btn-lg.btn-youtube(type='button')
                svg.c-icon.mr-2
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-youtube")
                span YouTube
              button.btn.btn-lg.btn-dribbble(type='button')
                svg.c-icon.mr-2
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-dribbble")
                span Dribbble
              button.btn.btn-lg.btn-instagram(type='button')
                svg.c-icon.mr-2
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-instagram")
                span Instagram
              button.btn.btn-lg.btn-pinterest(type='button')
                svg.c-icon.mr-2
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-pinterest")
                span Pinterest
              button.btn.btn-lg.btn-vk(type='button')
                svg.c-icon.mr-2
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-vk")
                span VK
              button.btn.btn-lg.btn-yahoo(type='button')
                svg.c-icon.mr-2
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-yahoo")
                span Yahoo
              button.btn.btn-lg.btn-behance(type='button')
                svg.c-icon.mr-2
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-behance")
                span Behance
              button.btn.btn-lg.btn-reddit(type='button')
                svg.c-icon.mr-2
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-reddit")
                span Reddit
              button.btn.btn-lg.btn-vimeo(type='button')
                svg.c-icon.mr-2
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-vimeo")
                span Vimeo
      // /.col
      .col-12
        .card
          .card-header
            strong Brand Buttons
            small &nbsp;Only icons
          .card-body
            h6
              | Size Small
              small
                | Add this class
                code .btn-sm
            p
              button.btn.btn-sm.btn-facebook(type='button')
                svg.c-icon
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-facebook-f")
              button.btn.btn-sm.btn-twitter(type='button')
                svg.c-icon
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-twitter")
              button.btn.btn-sm.btn-linkedin(type='button')
                svg.c-icon
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-linkedin")
              button.btn.btn-sm.btn-flickr(type='button')
                svg.c-icon
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-flickr")
              button.btn.btn-sm.btn-tumblr(type='button')
                svg.c-icon
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-tumblr")
              button.btn.btn-sm.btn-xing(type='button')
                svg.c-icon
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-xing")
              button.btn.btn-sm.btn-github(type='button')
                svg.c-icon
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-github")
              button.btn.btn-sm.btn-stack-overflow(type='button')
                svg.c-icon
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-stack-overflow")
              button.btn.btn-sm.btn-youtube(type='button')
                svg.c-icon
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-youtube")
              button.btn.btn-sm.btn-dribbble(type='button')
                svg.c-icon
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-dribbble")
              button.btn.btn-sm.btn-instagram(type='button')
                svg.c-icon
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-instagram")
              button.btn.btn-sm.btn-pinterest(type='button')
                svg.c-icon
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-pinterest")
              button.btn.btn-sm.btn-vk(type='button')
                svg.c-icon
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-vk")
              button.btn.btn-sm.btn-yahoo(type='button')
                svg.c-icon
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-yahoo")
              button.btn.btn-sm.btn-behance(type='button')
                svg.c-icon
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-behance")
              button.btn.btn-sm.btn-reddit(type='button')
                svg.c-icon
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-reddit")
              button.btn.btn-sm.btn-vimeo(type='button')
                svg.c-icon
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-vimeo")
            h6 Size Normal
            p
              button.btn.btn-facebook(type='button')
                svg.c-icon
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-facebook-f")
              button.btn.btn-twitter(type='button')
                svg.c-icon
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-twitter")
              button.btn.btn-linkedin(type='button')
                svg.c-icon
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-linkedin")
              button.btn.btn-flickr(type='button')
                svg.c-icon
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-flickr")
              button.btn.btn-tumblr(type='button')
                svg.c-icon
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-tumblr")
              button.btn.btn-xing(type='button')
                svg.c-icon
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-xing")
              button.btn.btn-github(type='button')
                svg.c-icon
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-github")
              button.btn.btn-stack-overflow(type='button')
                svg.c-icon
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-stack-overflow")
              button.btn.btn-youtube(type='button')
                svg.c-icon
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-youtube")
              button.btn.btn-dribbble(type='button')
                svg.c-icon
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-dribbble")
              button.btn.btn-instagram(type='button')
                svg.c-icon
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-instagram")
              button.btn.btn-pinterest(type='button')
                svg.c-icon
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-pinterest")
              button.btn.btn-vk(type='button')
                svg.c-icon
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-vk")
              button.btn.btn-yahoo(type='button')
                svg.c-icon
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-yahoo")
              button.btn.btn-behance(type='button')
                svg.c-icon
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-behance")
              button.btn.btn-reddit(type='button')
                svg.c-icon
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-reddit")
              button.btn.btn-vimeo(type='button')
                svg.c-icon
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-vimeo")
            h6
              | Size Large
              small
                | Add this class
                code .btn-lg
            p
              button.btn.btn-lg.btn-facebook(type='button')
                svg.c-icon
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-facebook-f")
              button.btn.btn-lg.btn-twitter(type='button')
                svg.c-icon
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-twitter")
              button.btn.btn-lg.btn-linkedin(type='button')
                svg.c-icon
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-linkedin")
              button.btn.btn-lg.btn-flickr(type='button')
                svg.c-icon
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-flickr")
              button.btn.btn-lg.btn-tumblr(type='button')
                svg.c-icon
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-tumblr")
              button.btn.btn-lg.btn-xing(type='button')
                svg.c-icon
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-xing")
              button.btn.btn-lg.btn-github(type='button')
                svg.c-icon
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-github")
              button.btn.btn-lg.btn-stack-overflow(type='button')
                svg.c-icon
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-stack-overflow")
              button.btn.btn-lg.btn-youtube(type='button')
                svg.c-icon
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-youtube")
              button.btn.btn-lg.btn-dribbble(type='button')
                svg.c-icon
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-dribbble")
              button.btn.btn-lg.btn-instagram(type='button')
                svg.c-icon
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-instagram")
              button.btn.btn-lg.btn-pinterest(type='button')
                svg.c-icon
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-pinterest")
              button.btn.btn-lg.btn-vk(type='button')
                svg.c-icon
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-vk")
              button.btn.btn-lg.btn-yahoo(type='button')
                svg.c-icon
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-yahoo")
              button.btn.btn-lg.btn-behance(type='button')
                svg.c-icon
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-behance")
              button.btn.btn-lg.btn-reddit(type='button')
                svg.c-icon
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-reddit")
              button.btn.btn-lg.btn-vimeo(type='button')
                svg.c-icon
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-vimeo")
      // /.col
    // /.row
